<template>
    <div>
    <!-- <el-select v-model="chianges" @change="changeselect">
            <el-option v-for="item in optionsa"  :key="item.value" :label="item.key" :value="item.value" />
        </el-select> -->
    <div class="" v-loading="isLoading">
      <!-- <div v-for="item in optionsa" :key="item.value"
                class=" px-[10px] text-[#D6D6D6]  py-[4px] rounded-[2px] cursor-pointer"
                :class="isactive == item.value ? 'active' : 'bg-[#cccccc] text-[#f5f5f5] dark:bg-[#2e3349] dark:text-[#f5f5f5]'"
                @click="isrealy(item.value)">
                {{ item.key }}
            </div> -->
      <el-radio-group v-model="isactive" >
        <div class="flex flex-col w-[100%]" v-for="item in optionsa"  @click="isrealy(item.value)">
          <el-radio :label="item.value">{{ item.key }}</el-radio>
        </div>
      </el-radio-group>
    </div>
  </div>
</template>
<script setup>
import { projectops } from "@/api/manage/regulatory-authorities/regulatory-authorities";
const optionsa = ref([]);
const props = defineProps({
    options: {
        type: Array,
        default: []
    },
    modelValue: {
        type: Number,
        default: () => null
    },
    isLoading: {
        type: Boolean,
        default: () => false
    },
    activevalue: {
        type: Number || String,
        default: () => null
    }
})
const emits = defineEmits(['update:modelValue'])
const isactive = ref(null)
const isrealy = (e) => {
    isactive.value = e
    emits("update:modelValue", e);
}
const changeselect = (e) => {
    emits("update:modelValue", e);
}
const chianges = ref(null)
onMounted(() => {
    optionsa.value = props.options;
});
watch(
    () => props.options,
    (newValue, oldValue) => {
        optionsa.value = newValue;
    }
);
watch(
    () => props.activevalue,
    (newValue, oldValue) => {
        isactive.value = newValue;
    }
);
</script>
<style lang="scss" scoped>
.active {
    background-color: rgba(69, 131, 255, 0.2);
    color: rgb(69, 131, 255)
}
</style>